<script setup lang="ts">
import type { AppRole, AppRoleQuery } from '@/apis/system/appRoleApi'
import type { DataAction } from '@/components/DataForm/types'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { CommonStates } from '@/apis/common/commonApi'
import { appRoleApi } from '@/apis/system/appRoleApi'
import { useEditFormDrawer } from '@/components/DataForm/useEditFormDrawer'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'
import AppMenuTree from '../components/AppMenuTree.vue'

const {
  editFormData,
  openEditForm,
  EditFormDrawer,
} = useEditFormDrawer<AppRole>({
  editFields: [
    { name: 'appType', title: '应用类型', edit: data => data.id === undefined, require: true, dict: 'ENUM_APP_TYPE', editType: 'button' },
    { name: 'name', title: '角色名称', require: true, maxLength: 32 },
    { name: 'code', title: '角色编码', edit: data => data.id === undefined, require: true, maxLength: 16 },
    { name: 'state', title: '状态', require: true, options: [...CommonStates], editType: 'button' },
    { name: 'menuIds', title: '角色菜单' },
  ],
})

const {
  queryFormData,
  submitQuery,
  QueryForm,
  Table,
  TableFieldFilterButton,
} = useTable<AppRoleQuery, AppRole>({
  defaultQuery: { appType: 'MANAGE' },
  autoQuery: true,
  queryPage: appRoleApi.queryPage,
  queryFields: [
    { title: '应用', name: 'appType', dict: 'ENUM_APP_TYPE', require: true },
    { title: 'ID', name: 'id' },
    { title: '角色名称', name: 'name' },
    { title: '角色编码', name: 'code' },
    { title: '角色状态', name: 'state', options: [...CommonStates] },

  ],
  tableFields: [
    { title: '应用', name: 'appType', width: 100, sort: false, show: false, dict: 'ENUM_APP_TYPE' },
    { title: 'ID', name: 'id', width: 80, columnType: 'KEY', sort: true },
    { title: '角色名称', name: 'name', width: 180, columnType: 'MAIN', sort: true, click: onEdit },
    { title: '角色编码', name: 'code', width: 100, sort: false },
    { title: '角色状态', name: 'state', width: 90, options: [...CommonStates] },
    { title: '更新时间', name: 'updateTime', width: 180, columnFilter: false },
  ],
})

const actions = reactive<Record<string, DataAction>>({
  create: {
    label: '新增',
    type: 'primary',
    authCode: 'system:app:role:create',
    click: () => openEditForm('新增', {
      appType: queryFormData.value?.appType,
      state: 'ENABLE',
    }, appRoleApi.create),
  },
  modify: {
    label: '编辑',
    type: 'primary',
    authCode: 'system:app:role:modify',
    click: onEdit,
  },
  changeState: {
    label: row => row.state === 'ENABLE' ? '禁用' : '启用',
    type: 'warning',
    authCode: 'system:app:role:modify',
    confirm: row => `是否${row.state === 'ENABLE' ? '禁用' : '启用'}应用角色`,
    click: data => appRoleApi.modify({ id: data.id, state: data.state === 'ENABLE' ? 'DISABLE' : 'ENABLE' }),
    success: () => submitQuery(),
    message: true,
  },
  remove: {
    label: '删除',
    type: 'danger',
    authCode: 'system:app:role:remove',
    confirm: '删除不可恢复，请谨慎确认',
    click: data => appRoleApi.remove(data.id),
    success: () => submitQuery(),
    message: true,
  },
})

async function onEdit(row: AppRole) {
  openEditForm('编辑', await appRoleApi.findDetail(row.id!), appRoleApi.modify)
}
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm />
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <!-- 表格按钮 -->
      <data-button :action="actions.create" />
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <Table :row-actions="[actions.changeState, actions.modify, actions.remove]" />
  </BaseCard>

  <!-- 数据编辑 -->
  <EditFormDrawer @success="(title:string) => submitQuery(title === '新增' ? 1 : undefined)">
    <template #menuIds="{ data }">
      <AppMenuTree
        v-model="data.menuIds"
        :app-type="editFormData?.appType"
      />
    </template>
  </EditFormDrawer>
</template>
